<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="flex.css">
</head>
<body>
    <!-- 容器属性总结
    1.flex-direction 设置容器主轴方向，一般不用设置默认为X轴
    2.flex-wrap 设置项目是否换行，如果为设置换行，当所有项目的总宽度大于主轴宽度时，
    项目元素的宽度会被压缩，以保证能力够排成一行。
    3.flex-flow:<flex-direction> || <flex-wrap>;
    4.justify-content 。justify一般处理的是主轴方向对齐，content表示内容，表示处理多个项目。
    5. align-items 。align 一般处理的是交叉轴方向对齐，用在处理项目单行时在交叉轴（默认Y轴）的对齐
    6.align-content。用在处理项目多行时在交叉轴（默认Y轴）的对齐
    -->
    <h2>容器设置</h2>
    <div class="box">
        <div class="item">1  </div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
    </div>
    <h2>项目设置</h2>
    <div class="box2">
        <div class="item2"></div>
        <div class="item2"></div>
        <div class="item2"></div>
        <div class="item2"></div>
    </div>
</body>
</html>